<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			
			#container{
				/*开启弹性布局*/
				    display:flex;
				    /*wrap：换行，第一行在上方。*/
				    flex-wrap:wrap;
		
			}
			
			.div1{
			position: relative;
				margin: 0 auto;
				
		
			}
			
			.div1 h1{
				text-align: center;
			}
			
			input{
				margin-bottom: 15px;
			}
			
	
			
			
			.file_up, #file_im {
			    /*控制宽度*/
			    width: 340px;
			    border: 2px #4fb2b2 solid;
			    padding: 5px 5px 5px 7px;
			    /*开启弹性布局*/
			    display: flex;
			    /*wrap：换行，第一行在上方。*/
			    flex-wrap: wrap;
			    justify-content: flex-start;
			
			
			}
			
			.file_up_a {
			    width: 100px;
			    height: 100px;
			    margin: 2px;
			    border: 2px #ffc99f solid;
			    /*文件上传背景图*/
			    background: url("/images/img_img.jpg") no-repeat center;
			    background-size: cover;
			    cursor: pointer;
			}
			
			.file_up_a:active {
			    cursor: wait;
			}
			
			#form_file {
			    display: none;
			}
			
			#File_css {
			    width: 100%;
			    height: 30px;
			    background-color: #f3f2f1;
			}
			
			#File_css:hover{
				background-color:skyblue;
				cursor: pointer;
			
			}
			
			.addClass1 {

				background-image: url("/images/2.gif");
				/*防止图片没加载出来 使用颜色代替*/

				/*适配图片大小*/
				/* background-size:cover; */
				/*背景图显示方式*/
				background-repeat: no-repeat;
				/*图像定位*/
				background-position: center;
				width: 500px;
				height: 500px;
				display: block;
					background-size:cover; 
				border-radius: 20px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				

			}
			
		</style>
	</head>
	<body>

		<div id="container" >
			
			
			<div class="div1" >
				
				
								<h1>添加图片</h1>				
					<div class="file_up">
					    <div id="file_im">
					        <img class="file_up_a" alt="" title="上传图片" src=""/>
					        <img class="file_up_a" alt="" title="上传图片" src=""/>
					        <img class="file_up_a" alt="" title="上传图片" src=""/>
					        <img class="file_up_a" alt="" title="上传图片" src=""/>
					    </div>
					    <button id="File_css">上传</button>
					</div>
					<form   id="form_file" enctype = "multipart/form-data"   method = "post">
					    <input type="file" name="file">
					    <input type="file" name="file">
					    <input type="file" name="file">
					    <input type="file" name="file">
					    <input type="button" value="上传" id="File_submit">
					</form>
					
					
							<h1>快速多选一键上传</h1>
							<p>点击上传按钮后(Ctrl+鼠标左键.. 快速多选图片)</p>
					<form   id="form_file2" enctype = "multipart/form-data"   method = "post">
					<input  type="file" id="file2" multiple="multiple" />
					<input type="button" value="上传" id="File_submit2">
					</form>
					
			
		
			</div>
			
		</div>

		<span  class="id1" th:id="${#request.getAttribute('id')}"></span>
		<script th:src="@{/js/jquery-3.4.1.js}" type="text/javascript"></script>
		<script>


			var id=$(".id1").attr("id");  //此相册的id



			$('#File_submit2').click(function () {
				

				if(id!=undefined&&$("#file2").val()!=""){
					$("#container").addClass("addClass1");
					$(".div1").hide()

					var formData = new FormData();
					 var file = document.getElementById("file2").files;
					 console.clear()
							for(i=0;i<file.length;i++){
								if(file[i]!=undefined){
									console.log(file[i])
									formData.append("file", file[i]); 
								}
								
					          
					        }


				
							$.ajax({
							        url:'/albumImageitems/ins/'+id,
							        dataType:'json',
							        type:'POST',
							        async: false,
							        data: formData,
							        processData : false, // 使数据不做处理
							        contentType : false, // 不要设置Content-Type请求头
							        success: function(data){
							            console.log(data);
										

				     　             if (data.flag == true) {
							                alert('上传成功！');
											location.href="/image_son.html?id="+id;
											return false;
									}  else {

									   $("#container").removeClass("addClass1")
									   $(".div1").show();

				     					alert("上传失败 可能是网络问题")
									   return  false;
								   }
				　
										
							            
							
							        },
							        error:function(response){
							            console.log(response);
							        }
							    });
							return false ;
				
				
			}else{
					alert("上传失败 没有要上传的文件")

					return false;
			}
				
				    
				
				})
			
			
			
			
			
			
			$('#File_submit').click(function () {
					if(id!=undefined){
						$("#container").addClass("addClass1");
						$(".div1").hide()
				
				var formData = new FormData();
				
				 var file = document.getElementsByName("file");
				 console.clear()
						for(i=0;i<file.length;i++){
							if(file[i].files[0]!=undefined){
								console.log(file[i].files[0])
								  formData.append("file", file[i].files[0]); 
							}
							
				          
				        }


			
						$.ajax({
						        url:'/albumImageitems/ins/'+id,
						        dataType:'json',
						        type:'POST',
						        data: formData,
						        processData : false, // 使数据不做处理
						        contentType : false, // 不要设置Content-Type请求头
						        success: function(data){
						            console.log(data);


									if (data.flag == true) {
										alert('上传成功！');
										location.href="/image_son.html?id="+id;
										return false;
									}  else {
										$("#container").removeClass("addClass1")
										$(".div1").show();
										alert("上传失败 可能是网络问题")
										return  false;
									}




								},
						        error:function(response){
						            console.log(response);
						        }
						    });
						return false ;
			
				}else{
					console.log("id是空")
			}
			    	
	})
			window.onload = function () {
			    var index;
			    $("body").on("click", ".file_up .file_up_a", function () {
			        index = $(this).index();
			        $("[type=\"file\"]").eq(index).click();
			    })
			    $("body").on("change", "#form_file [name=\"file\"]", function () {
			        var pa=$(this).val();
			        var last = pa.lastIndexOf('\\')+1;
			        var  File_name=pa.substring( last,pa.length);  //文件名称
			        //获取文件后缀
			        var aszd=File_name.lastIndexOf('.')+1;
			        var  suffix=File_name.substring(aszd,aszd.length);  //文件后缀
			
			        //修改图片
			        if (pd_file(suffix)){
						$(this).val("");
			            return false;
			        }
			
			        //鼠标悬浮显示文件名称
			        $(".file_up_a").eq(index).attr("title", File_name);
			
			        var pd = true;
			        for (var i = 0; i < $("#form_file [name=\"file\"]").length; i++) {
			            var up_va = $("[name=\"file\"]").eq(i).val()
			            if (typeof (up_va) === "undefined") {
			                pd = false;
			                break;
			            }
			            if (up_va.trim().length <= 0 || up_va.trim() === "") {
			                pd = false;
			                break;
			            }
			        }
			        if (pd) {
			            $("#file_im").append("<img class=\"file_up_a\" alt=\"\" title=\"上传图片\"  src=\"\"/>")
			            $("#form_file").append(" <input type=\"file\" name=\"file\">")
			        }
			    })
			
			    $("#File_css").click(function () {
			        $("#File_submit").click()
			    })
			  //获取上传的路径
			    function getPath(index) {
			        var url = null;
			        var fileObj = document.getElementsByName("file")[index].files[0];
			        if (window.createObjcectURL != undefined) {
			            url = window.createOjcectURL(fileObj);
			        } else if (window.URL != undefined) {
			            url = window.URL.createObjectURL(fileObj);
			        } else if (window.webkitURL != undefined) {
			            url = window.webkitURL.createObjectURL(fileObj);
			        }
			        return url
			    }
			
			
			    function pd_file(suffix) {

			      if(suffix==="png"||suffix==="jpg"||suffix==="jpeg"||suffix==="gif"){
			            $(".file_up_a").eq(index).attr("src",getPath(index))
					  return false;
				  }else{
			            alert("不支持你上传的文件 目前只支持(  gif   jpg    jpeg   png)")
			            return true;
			        }
			    }



				$("body").on("change", "#form_file2 #file2", function () {
					console.clear()

					var file = document.getElementById("file2").files;
					var pd=false;
					for(i=0;i<file.length;i++){
						if(file[i]!=undefined){
							console.log(file[i].name)
							var pa=file[i].name
							var last = pa.lastIndexOf('\\')+1;
							var  File_name=pa.substring( last,pa.length);  //文件名称
							//获取文件后缀
							var aszd=File_name.lastIndexOf('.')+1;
							var  suffix=File_name.substring(aszd,aszd.length);  //文件后缀
							console.log(suffix)
							//修改图片后缀
							if (pd_file1(suffix)){
								pd=true;
								break;

							}
						}
					}
					if(pd){
						$("#file2").val("");
					}
					return false;
				})

				function pd_file1(suffix) {

					if(suffix==="png"||suffix==="jpg"||suffix==="jpeg"||suffix==="gif"){

						return false;
					}else{
						alert("不支持你上传的文件 目前只支持(  gif   jpg    jpeg   png)")
						return true;
					}
				}


			
			}
		</script>
		
	</body>
</html>
